<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>网站管理</el-breadcrumb-item>
      <el-breadcrumb-item>网站基本信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" >

      <el-row >
        <el-col :span="10" v-for="item in cusItem" >
          <el-card class= "box-card">
            <div slot= "header" class="clearfix">
              <span>网站信息</span>
              <el-button  type= "text" @click="getWebsite(item)" style="float: right; padding: 3px 10px" >修改</el-button>


            </div>
            <div class="text item" >
              <el-row >
                <el-col :span=18 style="...">
                  网站title:
                  <el-tag>{{item.title}}</el-tag>

                </el-col>
              </el-row>
              <br>
              <el-row >
                <el-col :span=18 style="...">
                  网站logo:  <el-tag style="height: 60px"><img  v-if="item.logo!=null" :src="'/api/education-user/student/download/'+item.logo" width="50px" height="50px"></el-tag>
                </el-col>
              </el-row>
              <br>
                <el-row >
                <el-col :span=18 style="...">
                  网站介绍:  <el-tag>{{item.content}}</el-tag>
                </el-col>
                </el-row>
              <br>
                  <el-row >
                <el-col :span=18 styLe="...">
                  网站版权:  <el-tag>{{item.copyright}}</el-tag>
                </el-col>
                  </el-row>
              <br>
                    <el-row >
                <el-col :span=18 styLe="..">
                  关键词:  <el-tag>{{item.keywords}}</el-tag>
                </el-col>
                    </el-row>
              <br>
                      <el-row >
                <el-col :span=18 styLe="...">
                邮箱:  <el-tag>{{item.email}}</el-tag>
                </el-col>
                      </el-row>
              <br>
                        <el-row >
                <el-coL :span=18 style="...">
                  联系电话: <el-tag>{{item.tel}}</el-tag>
                </el-col>

              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog :append-to-body=true :close-on-click-modal="false" :title="userForm.id==null?'添加用户':'编辑用户'" :visible.sync="userFormVisible"
               @closed="crearUserForm"> <!--用户表单框 -->
      <el-form :model="userForm" label-width="70px" >
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="LOGO">
              <el-upload
                class="avatar-uploader"
                action="/api/education-website/eduWebsite/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="userForm.logo!=null" :src="'/api/education-website/eduWebsite/download/'+userForm.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="网站标题">
              <el-input v-model="userForm.title"  size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="网站介绍">
              <el-input v-model="userForm.content"  size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="网站版权">
              <el-input v-model="userForm.copyright"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="关键词">
              <el-input v-model="userForm.keywords"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="邮箱">
                <el-input v-model="userForm.email"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="22">
          <el-col :span="11">
            <el-form-item label="联系电话">
              <el-input v-model="userForm.tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="dialog-footer" slot="footer">
        <el-button @click="userFormVisible = false">取 消</el-button>
        <el-button @click="saveSite()" type="primary">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "website",
      data(){
        return{
          cusItem:[],
          userFormVisible: false,
          userForm:'',
        }
      },
      methods:{
        searchList:function (id) {

          this.$http.get("education-website/edu-website-base/getinfor").then((res)=>{
            this.cusItem=res.data.result;
          })
        },
        handleClick(tab, event) {
          activeName='second';

        },
        getWebsite:function (item) {
          this.userForm=item;
          this.userFormVisible=true;
        },
        crearUserForm: function () {
          //清空数据
          this.userForm = {}
        },
        handleAvatarSuccess(res, file) {//上传完成后回调
          this.userForm.logo = res.result.path;
        },
        beforeAvatarUpload(file) {//=,=== 和 == 比较的是内容
          const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        saveSite:function () {
          this.$http.post("education-website/edu-website-base/updateinfor",this.userForm).then((res)=>{
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message);
            }
          });
          //关闭dialog框
          this.userFormVisible = false
          //重新加载列表
          this.searchList()
        }
      },
      mounted() {
        this.searchList();
      },
      filters:{
        staFit:function (val) {
          if(val==3){
            return "待付款"
          }
          if(val==4){
            return "已付款"
          }
          if(val==5){
            return "已开发票"
          }
          if(val=6){
            return "订单已关闭"
          }
        }

      }
    }
</script>

<style scoped>

  .rechnum {
    color: #ec5a5b;
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    line-height: 40px;
  }
  .tr_rechnum {
    height: 40px;
  }
  .tr_rechcho {
    margin-bottom: 20px;
    display: inline-block;
  }
  .am-form-group {
    margin-bottom: 1.5rem;
  }
  .tr_paybox {
    padding: 20px;
  }
  .am-form-group>label>span {
    color: #999;
  }
  .am-radio .am-icon-unchecked, .am-radio .am-icon-checked {
    top: 13px;
  }
  .box-card {
    width: 700px;
    height: 600px;
  }
</style>
